ஜாவாஸ்கிரிப்ட் ஈவென்ட் லூப்பின் மர்மம்: ஒத்திசைவற்ற செயலாக்கத்தின் இயந்திரம்

வலை மேம்பாட்டின் மாறும் உலகில், ஜாவாஸ்கிரிப்ட் ஒரு மூலக்கல்லாக நின்று, உலகம் முழுவதும் ஊடாடும் அனுபவங்களை வழங்குகிறது. அதன் மையத்தில், ஜாவாஸ்கிரிப்ட் ஒரு ஒற்றை-திரி மாதிரியில் (single-threaded model) செயல்படுகிறது, அதாவது அது ஒரு நேரத்தில் ஒரு பணியை மட்டுமே செயல்படுத்த முடியும். இது ஒரு வரம்பாகத் தோன்றலாம், குறிப்பாக சேவையகத்திலிருந்து தரவைப் பெறுவது அல்லது பயனர் உள்ளீட்டிற்கு பதிலளிப்பது போன்ற குறிப்பிடத்தக்க நேரம் எடுக்கும் செயல்பாடுகளைக் கையாளும் போது. இருப்பினும், ஜாவாஸ்கிரிப்ட் ஈவென்ட் லூப்பின் புத்திசாலித்தனமான வடிவமைப்பு, இந்த சாத்தியமான தடுக்கும் பணிகளை ஒத்திசைவற்ற முறையில் கையாள அனுமதிக்கிறது, உங்கள் பயன்பாடுகள் உலகெங்கிலும் உள்ள பயனர்களுக்கு பதிலளிக்கக்கூடியதாகவும், தடையற்றதாகவும் இருப்பதை உறுதி செய்கிறது.

ஒத்திசைவற்ற செயலாக்கம் என்றால் என்ன?

ஈவென்ட் லூப்பைப் பற்றி ஆழமாக ஆராய்வதற்கு முன், ஒத்திசைவற்ற செயலாக்கத்தின் கருத்தைப் புரிந்துகொள்வது முக்கியம். ஒரு ஒத்திசைவான (synchronous) மாதிரியில், பணிகள் வரிசையாக செயல்படுத்தப்படுகின்றன. ஒரு நிரல் ஒரு பணி முடிவடையும் வரை காத்திருந்து அடுத்த பணிக்குச் செல்லும். ஒரு சமையல்காரர் உணவு தயாரிப்பதை கற்பனை செய்து பாருங்கள்: அவர்கள் காய்கறிகளை நறுக்குகிறார்கள், பிறகு அவற்றை சமைக்கிறார்கள், பிறகு தட்டில் வைக்கிறார்கள், ஒரு நேரத்தில் ஒரு படி. நறுக்குவதற்கு அதிக நேரம் எடுத்தால், சமைப்பதும் தட்டில் வைப்பதும் காத்திருக்க வேண்டும்.

மறுபுறம், ஒத்திசைவற்ற (Asynchronous) செயலாக்கம், முக்கிய செயலாக்கத் திரியைத் தடுக்காமல், பணிகளைத் தொடங்கி பின்னணியில் கையாள அனுமதிக்கிறது. மீண்டும் நமது சமையல்காரரை நினைத்துப் பாருங்கள்: முக்கிய உணவு சமைக்கப்படும்போது (நீண்ட செயல்முறை), சமையல்காரர் ஒரு சாலட்டைத் தயாரிக்கத் தொடங்கலாம். முக்கிய உணவை சமைப்பது சாலட் தயாரிப்பதைத் தடுக்காது. நெட்வொர்க் கோரிக்கைகள் (ஏபிஐகளிலிருந்து தரவைப் பெறுதல்), பயனர் தொடர்புகள் (பொத்தான் கிளிக்குகள், ஸ்க்ரோலிங்) மற்றும் டைமர்கள் போன்ற பணிகள் தாமதங்களை அறிமுகப்படுத்தக்கூடிய வலை மேம்பாட்டில் இது மிகவும் மதிப்புமிக்கது.

ஒத்திசைவற்ற செயலாக்கம் இல்லாமல், ஒரு எளிய நெட்வொர்க் கோரிக்கை முழு பயனர் இடைமுகத்தையும் முடக்கிவிடும், இது உங்கள் வலைத்தளம் அல்லது பயன்பாட்டைப் பயன்படுத்தும் எவருக்கும், அவர்களின் புவியியல் இருப்பிடத்தைப் பொருட்படுத்தாமல், ஒரு வெறுப்பூட்டும் அனுபவத்திற்கு வழிவகுக்கும்.

ஜாவாஸ்கிரிப்ட் ஈவென்ட் லூப்பின் முக்கிய கூறுகள்

ஈவென்ட் லூப் என்பது ஜாவாஸ்கிரிப்ட் இயந்திரத்தின் (V8 in Chrome அல்லது SpiderMonkey in Firefox போன்றவை) ஒரு பகுதியல்ல. மாறாக, இது வலை உலாவி அல்லது Node.js போன்ற ஜாவாஸ்கிரிப்ட் குறியீடு செயல்படுத்தப்படும் இயக்கச் சூழல் (runtime environment) மூலம் வழங்கப்படும் ஒரு கருத்தாகும். இந்தச் சூழல் ஒத்திசைவற்ற செயல்பாடுகளை எளிதாக்க தேவையான ஏபிஐகள் மற்றும் வழிமுறைகளை வழங்குகிறது.

ஒத்திசைவற்ற செயலாக்கத்தை ஒரு யதார்த்தமாக்க ஒன்றிணைந்து செயல்படும் முக்கிய கூறுகளைப் பற்றி பார்ப்போம்:

1. கால் ஸ்டாக் (Call Stack)

கால் ஸ்டாக், எக்ஸிகியூஷன் ஸ்டாக் என்றும் அழைக்கப்படுகிறது, இது ஜாவாஸ்கிரிப்ட் செயல்பாட்டு அழைப்புகளைக் கண்காணிக்கும் இடமாகும். ஒரு செயல்பாடு அழைக்கப்படும்போது, அது ஸ்டாக்கின் மேலே சேர்க்கப்படுகிறது. ஒரு செயல்பாடு செயல்படுத்தி முடிந்ததும், அது ஸ்டாக்கிலிருந்து அகற்றப்படுகிறது. ஜாவாஸ்கிரிப்ட் Last-In, First-Out (LIFO) முறையில் செயல்பாடுகளை செயல்படுத்துகிறது. கால் ஸ்டாக்கில் ஒரு செயல்பாடு அதிக நேரம் எடுத்தால், அது முழு திரியையும் திறம்பட தடுக்கிறது, மேலும் அந்த செயல்பாடு முடியும் வரை வேறு எந்த குறியீடும் செயல்படுத்தப்படாது.

இந்த எளிய எடுத்துக்காட்டைக் கவனியுங்கள்:

            function first() {
  console.log('First function called');
  second();
}

function second() {
  console.log('Second function called');
  third();
}

function third() {
  console.log('Third function called');
}

first();

            

              
                Copy
              
            
          

first() அழைக்கப்படும்போது, அது ஸ்டாக்கில் தள்ளப்படுகிறது. பின்னர், அது second() ஐ அழைக்கிறது, இது first() க்கு மேலே தள்ளப்படுகிறது. இறுதியாக, second() ஆனது third() ஐ அழைக்கிறது, இது மேலே தள்ளப்படுகிறது. ஒவ்வொரு செயல்பாடும் முடிந்ததும், அது third(), பிறகு second(), இறுதியாக first() எனத் தொடங்கி ஸ்டாக்கிலிருந்து அகற்றப்படுகிறது.

2. வெப் ஏபிஐகள் / பிரவுசர் ஏபிஐகள் (பிரவுசர்களுக்காக) மற்றும் சி++ ஏபிஐகள் (நோட்.ஜேஎஸ்-க்காக)

ஜாவாஸ்கிரிப்ட் ஒற்றைத் திரியாக இருந்தாலும், உலாவி (அல்லது Node.js) நீண்ட நேரம் இயங்கும் செயல்பாடுகளை பின்னணியில் கையாளக்கூடிய சக்திவாய்ந்த ஏபிஐகளை வழங்குகிறது. இந்த ஏபிஐகள் பெரும்பாலும் சி++ போன்ற கீழ்-நிலை மொழியில் செயல்படுத்தப்படுகின்றன, மேலும் அவை ஜாவாஸ்கிரிப்ட் இயந்திரத்தின் ஒரு பகுதியல்ல. எடுத்துக்காட்டுகள் பின்வருமாறு:

• setTimeout(): ஒரு குறிப்பிட்ட தாமதத்திற்குப் பிறகு ஒரு செயல்பாட்டை செயல்படுத்துகிறது.
• setInterval(): ஒரு குறிப்பிட்ட இடைவெளியில் ஒரு செயல்பாட்டை மீண்டும் மீண்டும் செயல்படுத்துகிறது.
• fetch(): நெட்வொர்க் கோரிக்கைகளைச் செய்வதற்கு (எ.கா., ஒரு ஏபிஐயிலிருந்து தரவைப் பெறுதல்).
• DOM நிகழ்வுகள்: கிளிக், ஸ்க்ரோல், விசைப்பலகை நிகழ்வுகள் போன்றவை.
• requestAnimationFrame(): அனிமேஷன்களை திறமையாகச் செய்ய.

நீங்கள் இந்த வெப் ஏபிஐகளில் ஒன்றை (எ.கா., setTimeout()) அழைக்கும்போது, உலாவி அந்தப் பணியை எடுத்துக்கொள்கிறது. ஜாவாஸ்கிரிப்ட் இயந்திரம் அது முடிவடையும் வரை காத்திருக்காது. மாறாக, ஏபிஐ உடன் தொடர்புடைய கால்பேக் செயல்பாடு உலாவியின் உள் வழிமுறைகளுக்கு ஒப்படைக்கப்படுகிறது. செயல்பாடு முடிந்ததும் (எ.கா., டைமர் காலாவதியாகும் போது, அல்லது தரவு பெறப்பட்டதும்), கால்பேக் செயல்பாடு ஒரு வரிசையில் (queue) வைக்கப்படுகிறது.

3. கால்பேக் க்யூ (டாஸ்க் க்யூ அல்லது மேக்ரோடாஸ்க் க்யூ)

கால்பேக் க்யூ என்பது செயல்படுத்தத் தயாராக இருக்கும் கால்பேக் செயல்பாடுகளை வைத்திருக்கும் ஒரு தரவுக் கட்டமைப்பாகும். ஒரு ஒத்திசைவற்ற செயல்பாடு (setTimeout கால்பேக் அல்லது ஒரு DOM நிகழ்வு போன்றவை) முடிந்ததும், அதனுடன் தொடர்புடைய கால்பேக் செயல்பாடு இந்த வரிசையின் முடிவில் சேர்க்கப்படுகிறது. இது முக்கிய ஜாவாஸ்கிரிப்ட் திரியால் செயலாக்கத் தயாராக உள்ள பணிகளுக்கான காத்திருப்பு வரிசை என்று நினைத்துப் பாருங்கள்.

முக்கியமாக, கால் ஸ்டாக் முற்றிலும் காலியாக இருக்கும்போது மட்டுமே ஈவென்ட் லூப் கால்பேக் க்யூவைச் சரிபார்க்கும். இது தற்போதைய ஒத்திசைவான செயல்பாடுகள் குறுக்கிடப்படாமல் இருப்பதை உறுதி செய்கிறது.

4. மைக்ரோடாஸ்க் க்யூ (ஜாப் க்யூ)

சமீபத்தில் ஜாவாஸ்கிரிப்டில் அறிமுகப்படுத்தப்பட்ட மைக்ரோடாஸ்க் க்யூ, கால்பேக் க்யூவில் உள்ளவற்றை விட அதிக முன்னுரிமை கொண்ட செயல்பாடுகளுக்கான கால்பேக்குகளை வைத்திருக்கிறது. இவை பொதுவாக பிராமிஸ்கள் மற்றும் async/await தொடரியலுடன் தொடர்புடையவை.

மைக்ரோடாஸ்க்குகளின் எடுத்துக்காட்டுகள் பின்வருமாறு:

• பிராமிஸ்களிலிருந்து வரும் கால்பேக்குகள் (.then(), .catch(), .finally()).
• queueMicrotask().
• MutationObserver கால்பேக்குகள்.

ஈவென்ட் லூப் மைக்ரோடாஸ்க் க்யூவிற்கு முன்னுரிமை அளிக்கிறது. கால் ஸ்டாக்கில் ஒவ்வொரு பணி முடிந்த பிறகும், ஈவென்ட் லூப் மைக்ரோடாஸ்க் க்யூவைச் சரிபார்த்து, கால்பேக் க்யூவிலிருந்து அடுத்த பணிக்குச் செல்வதற்கு அல்லது எந்த ரெண்டரிங்கையும் செய்வதற்கு முன், கிடைக்கக்கூடிய அனைத்து மைக்ரோடாஸ்க்குகளையும் செயல்படுத்துகிறது.

ஈவென்ட் லூப் ஒத்திசைவற்ற பணிகளை எவ்வாறு ஒருங்கிணைக்கிறது

ஈவென்ட் லூப்பின் முதன்மை வேலை, கால் ஸ்டாக் மற்றும் க்யூக்களை தொடர்ந்து கண்காணித்து, பணிகள் சரியான வரிசையில் செயல்படுத்தப்படுவதையும், பயன்பாடு பதிலளிக்கக்கூடியதாக இருப்பதையும் உறுதி செய்வதாகும்.

இதோ தொடர்ச்சியான சுழற்சி:

1. கால் ஸ்டாக்கில் குறியீட்டைச் செயல்படுத்துதல்: ஈவென்ட் லூப் முதலில் செயல்படுத்த ஜாவாஸ்கிரிப்ட் குறியீடு உள்ளதா என்று சரிபார்க்கிறது. இருந்தால், அது அதைச் செயல்படுத்துகிறது, செயல்பாடுகளை கால் ஸ்டாக்கில் தள்ளி, அவை முடிந்ததும் அவற்றை வெளியேற்றுகிறது.
2. முடிந்த ஒத்திசைவற்ற செயல்பாடுகளைச் சரிபார்த்தல்: ஜாவாஸ்கிரிப்ட் குறியீடு இயங்கும்போது, அது வெப் ஏபிஐகளைப் பயன்படுத்தி ஒத்திசைவற்ற செயல்பாடுகளைத் தொடங்கலாம் (எ.கா., fetch, setTimeout). இந்தச் செயல்பாடுகள் முடிந்ததும், அவற்றின் தொடர்புடைய கால்பேக் செயல்பாடுகள் கால்பேக் க்யூ (மேக்ரோடாஸ்க்குகளுக்கு) அல்லது மைக்ரோடாஸ்க் க்யூ (மைக்ரோடாஸ்க்குகளுக்கு) ஆகியவற்றில் வைக்கப்படுகின்றன.
3. மைக்ரோடாஸ்க் க்யூவைச் செயலாக்குதல்: கால் ஸ்டாக் காலியானதும், ஈவென்ட் லூப் மைக்ரோடாஸ்க் க்யூவைச் சரிபார்க்கிறது. ஏதேனும் மைக்ரோடாஸ்க்குகள் இருந்தால், மைக்ரோடாஸ்க் க்யூ காலியாகும் வரை அது அவற்றை ஒவ்வொன்றாகச் செயல்படுத்துகிறது. இது எந்த மேக்ரோடாஸ்க்குகளையும் செயலாக்குவதற்கு முன்பு நடக்கிறது.
4. கால்பேக் க்யூவைச் செயலாக்குதல் (மேக்ரோடாஸ்க் க்யூ): மைக்ரோடாஸ்க் க்யூ காலியான பிறகு, ஈவென்ட் லூப் கால்பேக் க்யூவைச் சரிபார்க்கிறது. ஏதேனும் பணிகள் (மேக்ரோடாஸ்க்குகள்) இருந்தால், அது க்யூவிலிருந்து முதல் ஒன்றையெடுத்து, அதை கால் ஸ்டாக்கில் தள்ளி, அதைச் செயல்படுத்துகிறது.
5. ரெண்டரிங் (உலாவிகளில்): மைக்ரோடாஸ்க்குகள் மற்றும் ஒரு மேக்ரோடாஸ்க்கைச் செயலாக்கிய பிறகு, உலாவி ஒரு ரெண்டரிங் சூழலில் இருந்தால் (எ.கா., ஒரு ஸ்கிரிப்ட் செயல்படுத்தப்பட்ட பிறகு, அல்லது பயனர் உள்ளீட்டிற்குப் பிறகு), அது ரெண்டரிங் பணிகளைச் செய்யக்கூடும். இந்த ரெண்டரிங் பணிகளும் மேக்ரோடாஸ்க்குகளாகக் கருதப்படலாம், மேலும் அவையும் ஈவென்ட் லூப்பின் திட்டமிடலுக்கு உட்பட்டவை.
6. மீண்டும் செய்தல்: ஈவென்ட் லூப் பின்னர் படி 1க்குத் திரும்பி, தொடர்ந்து கால் ஸ்டாக் மற்றும் க்யூக்களைச் சரிபார்க்கிறது.

இந்த தொடர்ச்சியான சுழற்சிதான் ஜாவாஸ்கிரிப்டை உண்மையான மல்டி-திரெடிங் இல்லாமல் ஒரே நேரத்தில் நடப்பது போன்ற செயல்பாடுகளைக் கையாள அனுமதிக்கிறது.

விளக்க எடுத்துக்காட்டுகள்

ஈவென்ட் லூப்பின் நடத்தையை எடுத்துக்காட்டும் சில நடைமுறை எடுத்துக்காட்டுகளுடன் விளக்குவோம்.

எடுத்துக்காட்டு 1: setTimeout

            console.log('Start');

setTimeout(function callback() {
  console.log('Timeout callback executed');
}, 0);

console.log('End');

            

              
                Copy
              
            
          

எதிர்பார்க்கப்படும் வெளியீடு:

            Start
End
Timeout callback executed

            

              
                Copy
              
            
          

விளக்கம்:

• console.log('Start'); உடனடியாக செயல்படுத்தப்பட்டு கால் ஸ்டாக்கிலிருந்து தள்ளப்பட்டு/வெளியேற்றப்படுகிறது.
• setTimeout(...) அழைக்கப்படுகிறது. ஜாவாஸ்கிரிப்ட் இயந்திரம் கால்பேக் செயல்பாடு மற்றும் தாமதத்தை (0 மில்லி விநாடிகள்) உலாவியின் வெப் ஏபிஐக்கு அனுப்புகிறது. வெப் ஏபிஐ ஒரு டைமரைத் தொடங்குகிறது.
• console.log('End'); உடனடியாக செயல்படுத்தப்பட்டு கால் ஸ்டாக்கிலிருந்து தள்ளப்பட்டு/வெளியேற்றப்படுகிறது.
• இந்த கட்டத்தில், கால் ஸ்டாக் காலியாக உள்ளது. ஈவென்ட் லூப் க்யூக்களைச் சரிபார்க்கிறது.
• setTimeout ஆல் அமைக்கப்பட்ட டைமர், 0 தாமதத்துடன் கூட, ஒரு மேக்ரோடாஸ்க்காகக் கருதப்படுகிறது. டைமர் காலாவதியானதும், கால்பேக் செயல்பாடு function callback() {...} கால்பேக் க்யூவில் வைக்கப்படுகிறது.
• ஈவென்ட் லூப் கால் ஸ்டாக் காலியாக இருப்பதைக் கண்டு, பின்னர் கால்பேக் க்யூவைச் சரிபார்க்கிறது. அது கால்பேக்கைக் கண்டுபிடித்து, அதை கால் ஸ்டாக்கில் தள்ளி, அதைச் செயல்படுத்துகிறது.

இங்கு முக்கியமாகக் கவனிக்க வேண்டியது என்னவென்றால், 0-மில்லி விநாடி தாமதம் கூட கால்பேக் உடனடியாக செயல்படுத்தப்படும் என்று அர்த்தமல்ல. இது இன்னும் ஒரு ஒத்திசைவற்ற செயல்பாடு, மேலும் இது தற்போதைய ஒத்திசைவான குறியீடு முடிவடைந்து கால் ஸ்டாக் காலியாகும் வரை காத்திருக்கிறது.

எடுத்துக்காட்டு 2: பிராமிஸ்கள் மற்றும் setTimeout

மைக்ரோடாஸ்க் க்யூவின் முன்னுரிமையைக் காண பிராமிஸ்களை setTimeout உடன் இணைப்போம்.

            console.log('Start');

setTimeout(function setTimeoutCallback() {
  console.log('setTimeout callback');
}, 0);

Promise.resolve().then(function promiseCallback() {
  console.log('Promise callback');
});

console.log('End');

            

              
                Copy
              
            
          

எதிர்பார்க்கப்படும் வெளியீடு:

            Start
End
Promise callback
setTimeout callback

            

              
                Copy
              
            
          

விளக்கம்:

• 'Start' பதிவு செய்யப்படுகிறது.
• setTimeout அதன் கால்பேக்கை கால்பேக் க்யூவிற்காக திட்டமிடுகிறது.
• Promise.resolve().then(...) ஒரு தீர்க்கப்பட்ட பிராமிஸை உருவாக்குகிறது, மேலும் அதன் .then() கால்பேக் மைக்ரோடாஸ்க் க்யூவிற்காக திட்டமிடப்படுகிறது.
• 'End' பதிவு செய்யப்படுகிறது.
• கால் ஸ்டாக் இப்போது காலியாக உள்ளது. ஈவென்ட் லூப் முதலில் மைக்ரோடாஸ்க் க்யூவைச் சரிபார்க்கிறது.
• அது promiseCallback ஐக் கண்டுபிடித்து, அதைச் செயல்படுத்தி, 'Promise callback' ஐ பதிவு செய்கிறது. மைக்ரோடாஸ்க் க்யூ இப்போது காலியாக உள்ளது.
• பின்னர், ஈவென்ட் லூப் கால்பேக் க்யூவைச் சரிபார்க்கிறது. அது setTimeoutCallback ஐக் கண்டுபிடித்து, அதை கால் ஸ்டாக்கிற்குத் தள்ளி, அதைச் செயல்படுத்தி, 'setTimeout callback' ஐ பதிவு செய்கிறது.

பிராமிஸ் கால்பேக்குகள் போன்ற மைக்ரோடாஸ்க்குகள், setTimeout கால்பேக்குகள் போன்ற மேக்ரோடாஸ்க்குகளுக்கு முன்பு செயலாக்கப்படுகின்றன என்பதை இது தெளிவாகக் காட்டுகிறது, பிந்தையதற்கு 0 தாமதம் இருந்தாலும் கூட.

எடுத்துக்காட்டு 3: தொடர்ச்சியான ஒத்திசைவற்ற செயல்பாடுகள்

இரண்டு வெவ்வேறு எண்ட்பாயிண்டுகளிலிருந்து தரவைப் பெறுவதை கற்பனை செய்து பாருங்கள், அங்கு இரண்டாவது கோரிக்கை முதல் கோரிக்கையைச் சார்ந்துள்ளது.

            function fetchData(url) {
  return new Promise((resolve, reject) => {
    console.log(`Fetching data from: ${url}`);
    setTimeout(() => {
      // Simulate network latency
      resolve(`Data from ${url}`);
    }, Math.random() * 1000 + 500); // Simulate 0.5s to 1.5s latency
  });
}

async function processData() {
  console.log('Starting data processing...');

  try {
    const data1 = await fetchData('/api/users');
    console.log('Received:', data1);

    const data2 = await fetchData('/api/posts');
    console.log('Received:', data2);

    console.log('Data processing complete!');
  } catch (error) {
    console.error('Error processing data:', error);
  }
}

processData();
console.log('Initiated data processing.');

            

              
                Copy
              
            
          

சாத்தியமான வெளியீடு (ரேண்டம் டைம்அவுட்கள் காரணமாக தரவு பெறும் வரிசை சிறிது மாறலாம்):

            
Starting data processing...
Initiated data processing.
Fetching data from: /api/users
Fetching data from: /api/posts
// ... some delay ...
Received: Data from /api/users
Received: Data from /api/posts
Data processing complete!

            

              
                Copy
              
            
          

விளக்கம்:

• processData() அழைக்கப்பட்டு, 'Starting data processing...' பதிவு செய்யப்படுகிறது.
• async செயல்பாடு முதல் await க்குப் பிறகு செயலாக்கத்தை மீண்டும் தொடங்க ஒரு மைக்ரோடாஸ்க்கை அமைக்கிறது.
• fetchData('/api/users') அழைக்கப்படுகிறது. இது 'Fetching data from: /api/users' ஐப் பதிவுசெய்து, வெப் ஏபிஐயில் ஒரு setTimeout ஐத் தொடங்குகிறது.
• console.log('Initiated data processing.'); செயல்படுத்தப்படுகிறது. இது முக்கியமானது: நெட்வொர்க் கோரிக்கைகள் செயல்பாட்டில் இருக்கும்போது நிரல் மற்ற பணிகளைத் தொடர்ந்து இயக்குகிறது.
• processData() இன் ஆரம்ப செயலாக்கம் முடிவடைகிறது, அதன் உள் அசிங்க் தொடர்ச்சியை (முதல் await க்காக) மைக்ரோடாஸ்க் க்யூவில் தள்ளுகிறது.
• கால் ஸ்டாக் இப்போது காலியாக உள்ளது. ஈவென்ட் லூப் processData() இலிருந்து மைக்ரோடாஸ்க்கைச் செயலாக்குகிறது.
• முதல் await சந்திக்கப்படுகிறது. fetchData கால்பேக் (முதல் setTimeout இலிருந்து) டைம்அவுட் முடிந்ததும் கால்பேக் க்யூவிற்காக திட்டமிடப்படுகிறது.
• ஈவென்ட் லூப் பின்னர் மீண்டும் மைக்ரோடாஸ்க் க்யூவைச் சரிபார்க்கிறது. வேறு மைக்ரோடாஸ்க்குகள் இருந்திருந்தால், அவை இயங்கும். மைக்ரோடாஸ்க் க்யூ காலியானதும், அது கால்பேக் க்யூவைச் சரிபார்க்கிறது.
• fetchData('/api/users') க்கான முதல் setTimeout முடிந்ததும், அதன் கால்பேக் கால்பேக் க்யூவில் வைக்கப்படுகிறது. ஈவென்ட் லூப் அதை எடுத்து, அதைச் செயல்படுத்தி, 'Received: Data from /api/users' ஐப் பதிவுசெய்து, processData அசிங்க் செயல்பாட்டை மீண்டும் தொடங்குகிறது, இரண்டாவது await ஐ எதிர்கொள்கிறது.
• இந்த செயல்முறை இரண்டாவது `fetchData` அழைப்பிற்கும் மீண்டும் நிகழ்கிறது.

await ஒரு async செயல்பாட்டின் செயலாக்கத்தை எவ்வாறு இடைநிறுத்துகிறது, மற்ற குறியீட்டை இயக்க அனுமதிக்கிறது, பின்னர் எதிர்பார்க்கப்பட்ட பிராமிஸ் தீர்க்கப்படும்போது அதை மீண்டும் தொடங்குகிறது என்பதை இந்த எடுத்துக்காட்டு எடுத்துக்காட்டுகிறது. await என்ற முக்கியச்சொல், பிராமிஸ்கள் மற்றும் மைக்ரோடாஸ்க் க்யூவைப் பயன்படுத்துவதன் மூலம், ஒத்திசைவற்ற குறியீட்டை மேலும் படிக்கக்கூடிய, வரிசை போன்ற முறையில் நிர்வகிப்பதற்கான ஒரு சக்திவாய்ந்த கருவியாகும்.

ஒத்திசைவற்ற ஜாவாஸ்கிரிப்ட்டிற்கான சிறந்த நடைமுறைகள்

ஈவென்ட் லூப்பைப் புரிந்துகொள்வது, மிகவும் திறமையான மற்றும் கணிக்கக்கூடிய ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுத உங்களுக்கு அதிகாரம் அளிக்கிறது. இதோ சில சிறந்த நடைமுறைகள்:

• பிராமிஸ்கள் மற்றும் async/await ஐப் பயன்படுத்துங்கள்: இந்த நவீன அம்சங்கள் பாரம்பரிய கால்பேக்குகளை விட ஒத்திசைவற்ற குறியீட்டை மிகவும் சுத்தமாகவும், புரிந்துகொள்ள எளிதாகவும் ஆக்குகின்றன. அவை மைக்ரோடாஸ்க் க்யூவுடன் தடையின்றி ஒருங்கிணைந்து, செயலாக்க வரிசையின் மீது சிறந்த கட்டுப்பாட்டை வழங்குகின்றன.
• கால்பேக் ஹெல்லை (Callback Hell) மனதில் கொள்ளுங்கள்: கால்பேக்குகள் அடிப்படையானவை என்றாலும், ஆழமாகப் பதிக்கப்பட்ட கால்பேக்குகள் நிர்வகிக்க முடியாத குறியீட்டிற்கு வழிவகுக்கும். பிராமிஸ்கள் மற்றும் async/await இதற்கு சிறந்த மாற்று மருந்துகளாகும்.
• க்யூக்களின் முன்னுரிமையைப் புரிந்து கொள்ளுங்கள்: மைக்ரோடாஸ்க்குகள் எப்போதும் மேக்ரோடாஸ்க்குகளுக்கு முன்பு செயலாக்கப்படுகின்றன என்பதை நினைவில் கொள்ளுங்கள். பிராமிஸ்களைச் சங்கிலியாக்கும்போது அல்லது queueMicrotask ஐப் பயன்படுத்தும்போது இது முக்கியமானது.
• நீண்ட நேரம் இயங்கும் ஒத்திசைவான செயல்பாடுகளைத் தவிர்க்கவும்: கால் ஸ்டாக்கில் செயல்படுத்த அதிக நேரம் எடுக்கும் எந்த ஜாவாஸ்கிரிப்ட் குறியீடும் ஈவென்ட் லூப்பைத் தடுக்கும். கனமான கணக்கீடுகளை வேறு இடத்திற்கு மாற்றவும் அல்லது தேவைப்பட்டால் உண்மையான இணைச் செயலாக்கத்திற்கு வெப் வொர்க்கர்களைப் பயன்படுத்தவும்.
• நெட்வொர்க் கோரிக்கைகளை மேம்படுத்துங்கள்: fetch ஐ திறமையாகப் பயன்படுத்துங்கள். நெட்வொர்க் அழைப்புகளின் எண்ணிக்கையைக் குறைக்க கோரிக்கை ஒருங்கிணைப்பு அல்லது கேச்சிங் போன்ற நுட்பங்களைக் கருத்தில் கொள்ளுங்கள்.
• பிழைகளை நேர்த்தியாகக் கையாளவும்: ஒத்திசைவற்ற செயல்பாடுகளின் போது ஏற்படக்கூடிய பிழைகளை நிர்வகிக்க async/await உடன் try...catch பிளாக்குகளையும், பிராமிஸ்களுடன் .catch() ஐயும் பயன்படுத்தவும்.
• அனிமேஷன்களுக்கு requestAnimationFrame ஐப் பயன்படுத்தவும்: மென்மையான காட்சி புதுப்பிப்புகளுக்கு, setTimeout அல்லது setInterval ஐ விட requestAnimationFrame விரும்பப்படுகிறது, ஏனெனில் இது உலாவியின் மறுவரைதல் சுழற்சியுடன் ஒத்திசைக்கிறது.

உலகளாவிய பரிசீலனைகள்

ஜாவாஸ்கிரிப்ட் ஈவென்ட் லூப்பின் கொள்கைகள் உலகளாவியவை, அவை டெவலப்பர்களின் இருப்பிடம் அல்லது இறுதிப் பயனர்களின் இருப்பிடத்தைப் பொருட்படுத்தாமல் அனைவருக்கும் பொருந்தும். இருப்பினும், உலகளாவிய பரிசீலனைகள் உள்ளன:

• நெட்வொர்க் தாமதம்: உலகின் பல்வேறு பகுதிகளில் உள்ள பயனர்கள் தரவைப் பெறும்போது வெவ்வேறு நெட்வொர்க் தாமதங்களை அனுபவிப்பார்கள். உங்கள் ஒத்திசைவற்ற குறியீடு இந்த வேறுபாடுகளை நேர்த்தியாகக் கையாளும் அளவுக்கு வலுவாக இருக்க வேண்டும். அதாவது சரியான டைம்அவுட்கள், பிழை கையாளுதல் மற்றும் சாத்தியமான பின்னடைவு வழிமுறைகளை செயல்படுத்துதல்.
• சாதன செயல்திறன்: பல வளர்ந்து வரும் சந்தைகளில் பொதுவான பழைய அல்லது குறைந்த சக்திவாய்ந்த சாதனங்கள் மெதுவான ஜாவாஸ்கிரிப்ட் இயந்திரங்களையும் குறைந்த நினைவகத்தையும் கொண்டிருக்கலாம். வளங்களைப் பயன்படுத்தாத திறமையான ஒத்திசைவற்ற குறியீடு எல்லா இடங்களிலும் ஒரு நல்ல பயனர் அனுபவத்திற்கு முக்கியமானது.
• நேர மண்டலங்கள்: ஈவென்ட் லூப் நேர மண்டலங்களால் நேரடியாகப் பாதிக்கப்படாவிட்டாலும், உங்கள் ஜாவாஸ்கிரிப்ட் தொடர்பு கொள்ளக்கூடிய சர்வர் பக்க செயல்பாடுகளின் திட்டமிடல் பாதிக்கப்படலாம். உங்கள் பின்தள தர்க்கம் தொடர்புடைய நேர மண்டல மாற்றங்களைச் சரியாகக் கையாளுகிறது என்பதை உறுதிப்படுத்தவும்.
• அணுகல்தன்மை: உங்கள் ஒத்திசைவற்ற செயல்பாடுகள் உதவித் தொழில்நுட்பங்களை நம்பியுள்ள பயனர்களை எதிர்மறையாகப் பாதிக்காது என்பதை உறுதிப்படுத்தவும். எடுத்துக்காட்டாக, ஒத்திசைவற்ற செயல்பாடுகளால் ஏற்படும் புதுப்பிப்புகள் ஸ்கிரீன் ரீடர்களுக்கு அறிவிக்கப்படுவதை உறுதிப்படுத்தவும்.

முடிவுரை

ஜாவாஸ்கிரிப்ட் ஈவென்ட் லூப் என்பது ஜாவாஸ்கிரிப்டுடன் பணிபுரியும் எந்தவொரு டெவலப்பருக்கும் ஒரு அடிப்படைக் கருத்தாகும். இது நமது வலைப் பயன்பாடுகளை ஊடாடும், பதிலளிக்கக்கூடிய மற்றும் செயல்திறன் மிக்கதாக மாற்றும் ஒரு பாராட்டப்படாத ஹீரோவாகும், சாத்தியமான நேரத்தைச் செலவழிக்கும் செயல்பாடுகளைக் கையாளும் போதும் கூட. கால் ஸ்டாக், வெப் ஏபிஐகள் மற்றும் கால்பேக்/மைக்ரோடாஸ்க் க்யூக்களுக்கு இடையேயான தொடர்பைப் புரிந்துகொள்வதன் மூலம், நீங்கள் மிகவும் வலுவான மற்றும் திறமையான ஒத்திசைவற்ற குறியீட்டை எழுதும் சக்தியைப் பெறுவீர்கள்.

நீங்கள் ஒரு எளிய ஊடாடும் கூறுகளை உருவாக்குகிறீர்களா அல்லது ஒரு சிக்கலான ஒற்றைப் பக்கப் பயன்பாட்டை உருவாக்குகிறீர்களா என்பதைப் பொருட்படுத்தாமல், உலகளாவிய பார்வையாளர்களுக்கு விதிவிலக்கான பயனர் அனுபவங்களை வழங்குவதற்கு ஈவென்ட் லூப்பில் தேர்ச்சி பெறுவது முக்கியம். ஒரு ஒற்றைத் திரி மொழி அத்தகைய அதிநவீன ஒத்தியக்கத்தை அடைய முடியும் என்பது நேர்த்தியான வடிவமைப்பிற்கு ஒரு சான்றாகும்.

வலை மேம்பாட்டில் உங்கள் பயணத்தைத் தொடரும்போது, ஈவென்ட் லூப்பை மனதில் கொள்ளுங்கள். இது ஒரு கல்விசார் கருத்து மட்டுமல்ல; இது நவீன வலையை இயக்கும் நடைமுறை இயந்திரம்.